<template>
  <div class="login">
    <div class="box-a">
      <div class="m-2">
        <div class="m-2-1">
          <div class="m-2-2">
            <input type="text" placeholder="请输入账号" v-model="account" autofocus>
          </div>
          <div class="m-2-2">
            <input type="password" placeholder="请输入密码" v-model="password" @keyup.enter="onLogin">
          </div>
          <!--<div class="m-2-2-1">
            <input type="text" placeholder="请输入验证码" v-model="code">
            <img>
          </div>-->
          <div class="m-2-2">
            <bs-button @click="onLogin" :loading="loading">登 录</bs-button>
          </div>
        </div>
      </div>
      <div class="m-5">
        <div id="m-5-id-1">
          <div id="m-5-2">
            <div id="m-5-id-2">
            </div>
            <div id="m-5-id-3"></div>
          </div>
        </div>
      </div>
      <div class="m-10"></div>
      <div class="m-xz7"></div>
      <div class="m-xz8 xzleft"></div>
      <div class="m-xz9"></div>
      <div class="m-xz9-1"></div>
      <div class="m-x17 xzleft"></div>
      <div class="m-x18"></div>
      <div class="m-x19 xzleft"></div>
      <div class="m-x20"></div>
      <div class="m-8"></div>
      <div class="m-9">
        <div class="masked1" id="sx8">VBoot演示项目</div>
      </div>
      <div class="m-11">
        <div class="m-k-1">
          <div class="t1"></div>
        </div>
        <div class="m-k-2">
          <div class="t2"></div>
        </div>
        <div class="m-k-3">
          <div class="t3"></div>
        </div>
        <div class="m-k-4">
          <div class="t4"></div>
        </div>
        <div class="m-k-5">
          <div class="t5"></div>
        </div>
        <div class="m-k-6">
          <div class="t6"></div>
        </div>
        <div class="m-k-7">
          <div class="t7"></div>
        </div>
      </div>
      <div class="m-14">
        <div class="ss"></div>
      </div>
      <div class="m-15-a">
        <div class="m-15-k">
          <div class="m-15xz1">
            <div class="m-15-dd2"></div>
          </div>
        </div>
      </div>
      <div class="m-16"></div>
      <div class="m-17"></div>
      <div class="m-18 xzleft"></div>
      <div class="m-19"></div>
      <div class="m-20 xzleft"></div>
      <div class="m-21"></div>
      <div class="m-22"></div>
      <div class="m-23 xzleft"></div>
      <div class="m-24" id="localtime"></div>
    </div>
    <vue-snotify></vue-snotify>
  </div>
</template>

<script>
  export default {
    name: 'Login',
    data() {
      return {
        loading: false,
        account: '',
        password: '',
        code: ''
      };
    },
    computed: {
      validation() {
        return {
          account: !!this.account.trim(),
          password: !!this.password.trim()
        };
      },
      isValid() {
        var validation = this.validation;
        return Object.keys(validation).every(function(key) {
          return validation[key];
        });
      }
    },
    methods: {
      onLogin() {
        if (this.isValid) {
          this.$api('common.login').invoke({
            account: this.account,
            password: this.password
          }).then(() => {
            window.location.replace('/');
          });
        }
      }
    }
  };
</script>

<style scoped>
  @import "../styles/login.scss";
</style>
